<template>
  <div class="scoreAll">
    <div class="basicInfo">
      <div style="flex: 1.5;">
        <span>
          赛事名称：
          <b>{{ platoonMatch.com_name }}</b>
        </span>
        <span>
          裁判长：
          <b>{{ platoonMatch.referee_name }}</b>
        </span>
      </div>
      <div style="flex: 2;display: flex;justify-content: flex-end;align-items: baseline;">
        <div class="date">
          <span>{{ platoonDate }}</span>
        </div>
      </div>
      <div class="btnGroup">
        <el-button @click="Back">返回</el-button>
        <el-button type="primary" @click="pushScheduleHandle" style="z-index: 999;">保存</el-button>
      </div>
    </div>
    <!-- 新增 el-checkbox-->
    <div style="display: flex;margin-top: 10px;background-color: rgba(66, 185, 131, 0.2);border-radius: 2px;padding: 15px;flex-wrap: wrap;">
      <div v-for="(teams, teamsIndex) in teamsInfo">
        <el-checkbox v-model="teams[teamsIndex]" @change="teamsRoundSelected(teams, teamsIndex)">{{ teams.project }}（{{ teams.signUp_num }}）</el-checkbox>
      </div>
    </div>

    <div class="tableBox" id="tableBox">
      <div class="tableMain">
        <table class="table1">
          <thead>
            <tr>
              <td rowspan="2">组别</td>
              <td rowspan="2">签位</td>
              <td :colspan="2 * firstRounds.length">第一阶段轮次</td>
              <td :colspan="2 * secondRounds.length" v-if="secondRounds.length > 0">第二阶段轮次</td>
            </tr>
            <tr>
              <td colspan="2" v-for="(firstR, firstRIndex) in firstRounds">R{{ firstRIndex + 1 }}</td>
              <td colspan="2" v-for="(secondR, secondRIndex) in secondRounds">R{{ secondRIndex + 1 }}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(teams, teamsIndex, key) in teamsInfo" :key="key" v-if="teams.signUp_num && teams[teamsIndex]">
              <td :class="activeProjectIndex == teamsIndex ? 'projectBtnSelect' : 'projectBtn'">{{ teams.project }}（{{ teams.signUp_num }}）</td>
              <td>{{ teams.roundInfo.draw }}</td>
              <td colspan="2" v-for="(rounds, roundsIndex, key) in teams.rounds[0]" :key="key" @click.stop="teamsChoose(teams, teamsIndex, roundsIndex, 0)"
                :class="roundsClass(roundsSelected[0][teamsIndex][roundsIndex].disable, teamsIndex, roundsIndex, 0)">
                <span>{{ roundsSelected[0][teamsIndex][roundsIndex].count }}/{{ roundsSelected[0][teamsIndex][roundsIndex].countLength }}</span>
              </td>
              <td colspan="2" v-for="(blank, blankIndex) in firstRounds" v-if="blankIndex + 1 > teams.rounds[0].length"
                class="tdDisable"></td>
              <td colspan="2" v-for="(rounds, roundsIndex, key) in teams.rounds[1]" :key="key" @click.stop="teamsChoose(teams, teamsIndex, roundsIndex, 1)"
                :class="roundsClass(roundsSelected[1][teamsIndex][roundsIndex].disable, teamsIndex, roundsIndex, 1)">
                <span>{{ roundsSelected[1][teamsIndex][roundsIndex].count }}/{{ roundsSelected[1][teamsIndex][roundsIndex].countLength }}</span>
              </td>
              <td colspan="2" v-for="(blank, blankIndex) in secondRounds" v-if="blankIndex + 1 > teams.rounds[1].length"
                class="tdDisable"></td>
            </tr>
          </tbody>
        </table>
        <div style="height: 120px;">
          <el-scrollbar style="height: 100%;margin-top: 10px;">
            <el-card style="padding: 0;">
              <draggable v-model="list" class="panel__body--list" :options="{ group: 'Team', dragClass: 'sortable-drag', animation: 150, delay: 20 }"
                @remove="RemoveList" @add="updataList">
                <div v-for="(element, elementIndex, key) in list" :key="key" class="panel__body--item" v-if="element.place == null">
                  <div v-if="element.wheels - element.wheel <= 2 && element.isno == 1 &&
                  ((element.com_system_type == 1 && element.stage == 2) ||(element.com_system_type==3))
                  ">
                      {{ element | lastThreeMatch}}
                      <span v-if="element.team_name_a">{{ element.team_name_a }}</span>
                      <span v-else>
                        <span >
                          {{ element | battleName('a') }}
                        </span>
                      </span>
                      VS
                      <span v-if="element.team_name_b">{{ element.team_name_b }}</span>
                      <span v-else>
                        <span>
                          {{ element | battleName('b') }}
                        </span>
                      </span>
                  </div>
                  <div v-else>
                    <span v-if="element.team_name_a">{{ element.team_name_a }}</span>
                    <span v-else>
                      <span >
                        {{ element | battleName('a') }}
                      </span>
                    </span>
                    VS
                    <span v-if="element.team_name_b">{{ element.team_name_b }}</span>
                    <span v-else>
                      <span>
                        {{ element | battleName('b') }}
                      </span>
                    </span>
                  </div>
                </div>
              </draggable>
            </el-card>
          </el-scrollbar>
        </div>
        <el-scrollbar style="height: 800px; box-shadow: 1px 0px 9px 2px #9999; width:100%;margin-top: 10px;" wrap-class="tableScorll"
          :native="false">
          <table class="fixed_headers">
            <thead>
              <tr>
                <th>场序</th>
                <th v-for="(ground, groundIndex) in platoonName" :key="groundIndex">
                  <div>{{ ground.ground_name }}</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(playNumList, GroundIndex) in platoonGrounds">
                <td style="vertical-align: middle;text-align: center;">
                  <div class="groundIndex">{{ GroundIndex + 1 }}</div>
                </td>
                <td v-for="(playerNum, playerIndex) in playNumList">
                  <draggable v-model="playNumList[playerIndex].list" class="panel__body--list--playground" :options="{
											group: 'Team',
											animation: 150,
											delay: 20,
											dragClass: 'sortable-drag--playground',
											disabled: dragDisabled(playNumList[playerIndex].list[0])
										}"
                    @add="updatePlayGround" :move="onMove">
                    <div v-for="(element, elementIndex) in playerNum.list" :key="elementIndex" class="panel__body--item--playground">
                      <div class="battleBox" v-if="elementIndex < 1 && element" :class="dragDisabled(playNumList[playerIndex].list[0]) ? 'publishBattleBox' : ''">
                        <div style="display: flex;justify-content: space-between;align-items: baseline;">
                          <el-input v-if="GroundIndex == 0" v-model="element.note" size="mini" :disabled="dragDisabled(playNumList[playerIndex].list[0])"
                            style="width: 83%;margin: 0 1%;" placeholder="开始时间"></el-input>
                          <el-input v-else v-model="element.note" size="mini" :disabled="dragDisabled(playNumList[playerIndex].list[0])"
                            style="width: 83%;margin: 0 1%;color: #666" placeholder="紧跟前场">
                            紧跟前场
                          </el-input>
                          <div style="margin-right: 5px;color: #666666">#{{ GroundIndex + 1 }}</div>
                        </div>
                        <!--一盘 1场 三盘 3场 五盘 5场-->
                        <div class="playerName">
                          <div :class="element.name_a == element.win_site ? 'winner' : ''">
                            <span v-if="element.team_name_a">{{ element.team_name_a }}</span>
                            <span v-else>{{ element | playerName('a') }}</span>
                          </div>
                          <div class="vsGround">
                            <div class="VS">VS</div>
                            <div class="numBox" v-for="(game, gameIndex) in element.score" :key="gameIndex" v-if="gameIndex < 4">
                              <div class="numTop">
                                <div style="display: flex;">
                                  <div style="width:50%;text-align: right;">{{ game.top }}</div>
                                  <div style="font-size: 8px;position: relative;transform: scale(0.9, 0.9);width: 50%;text-align: left;"
                                    v-if="game.top < game.bot">
                                    {{ game.tiebreak }}
                                  </div>
                                </div>
                              </div>
                              <div>
                                <div style="display: flex;">
                                  <div style="width:50%;text-align: right;">{{ game.bot }}</div>
                                  <div style="font-size: 8px;position: relative;transform: scale(0.9, 0.9);width: 50%;text-align: left;"
                                    v-if="game.top > game.bot">
                                    {{ game.tiebreak }}
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-if="!element.score" class="numBox"></div>
                          </div>
                          <div style="border-bottom: 1px dashed #6666;" :class="element.name_b == element.win_site ? 'winner' : ''">
                            <span v-if="element.team_name_b">{{ element.team_name_b }}</span>
                            <span v-else>{{ element | playerName('b') }}</span>
                          </div>
                        </div>
                        <div class="playerInfo">
                          <!-- 轮次名称 time 2020-1-6 16:40:31-->
                          <div>{{element.group_name}}</div>
                          <div v-if="element.com_system_type == 5">{{ element.second_order + 1 }}区 {{ element | wheelName }}</div>
                          <div v-else>
                            {{ element | wheelName }}
                          </div>
                          <div style="display: flex;justify-content: space-between;align-items: baseline;margin: 0 10%;">
                            <div style="text-align: left;" v-if="element.referee">{{ element.referee }}</div>
                            <div style="text-align: left;" v-if="element.match_time">{{ element.match_time }}</div>
                          </div>
                          <div style="text-align: left;margin-left: 5px;"></div>
                        </div>
                      </div>
                    </div>
                  </draggable>
                </td>
              </tr>
            </tbody>
            <div class="morebox">
              <div class="more" @click="moreField"><i class="iconfont icon-add" style="margin-left: 7px;"></i></div>
            </div>
          </table>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  import {
    mapState
  } from 'vuex';
  import schedule from '../../../utils/schedule';
  let myVue = {};
  export default {
    name: 'scheduleAuto',
    components: {
      draggable
    },
    data() {
      return {
        playGroundIndex: [],
        list: [
          // {
          //   platoonGrounds_id: 1,
          //   label: 'a',
          //   time:'ShowT23423ime',
          // },
        ],
        list2: [],
        PGNumList: [
          [{
              platoonGrounds_id: 1,
              list: []
            },
            {
              platoonGrounds_id: 2,
              list: []
            },
            {
              platoonGrounds_id: 3,
              list: []
            },
            {
              platoonGrounds_id: 4,
              list: []
            },
            {
              platoonGrounds_id: 5,
              list: []
            },
            {
              platoonGrounds_id: 6,
              list: []
            }
          ],
          [{
              platoonGrounds_id: 1,
              list: []
            },
            {
              platoonGrounds_id: 2,
              list: []
            },
            {
              platoonGrounds_id: 3,
              list: []
            },
            {
              platoonGrounds_id: 4,
              list: []
            },
            {
              platoonGrounds_id: 5,
              list: []
            },
            {
              platoonGrounds_id: 6,
              list: []
            }
          ],
          [{
              platoonGrounds_id: 1,
              list: []
            },
            {
              platoonGrounds_id: 2,
              list: []
            },
            {
              platoonGrounds_id: 3,
              list: []
            },
            {
              platoonGrounds_id: 4,
              list: []
            },
            {
              platoonGrounds_id: 5,
              list: []
            },
            {
              platoonGrounds_id: 6,
              list: []
            }
          ]
        ],
        activeProjectIndex: -1,
        activeRoundsIndex: -1,
        activeStage: -1,
        activeTeamMatchType: '',
        optionsSelect: [{
            value: '1',
            label: '1'
          },
          {
            value: '2',
            label: '2'
          },
          {
            value: '3',
            label: '3'
          },
          {
            value: '4',
            label: '4'
          },
          {
            value: '5',
            label: '5'
          },
          {
            value: '6',
            label: '6'
          },
          {
            value: '7',
            label: '7'
          },
          {
            value: '8',
            label: '8'
          },
          {
            value: '9',
            label: '9'
          },
          {
            value: '10',
            label: '10'
          }
        ]
      };
    },
    filters: {
      lastThreeMatch: (battle, type) => {
        return battle.wheel_name
        // let maxWheel = battle.wheels
        // let wheel = battle.wheel
        // let wheelName = ''
        // let field = battle.field

        // if (wheel == parseInt(maxWheel) - 2) wheelName = '1/4决赛'

        // if (battle.isno == 1) {
        //   // 最后一轮
        //   if (wheel == parseInt(maxWheel) && field == 1) wheelName = '决赛'
        //   if (wheel == parseInt(maxWheel) && field == 2) wheelName = '5-6淘汰附加赛'
        //   if (wheel == parseInt(maxWheel) && field == 3) wheelName = '3-4淘汰附加赛'
        //   if (wheel == parseInt(maxWheel) && field == 4) wheelName = '7-8淘汰附加赛'
        //   // 倒数第二轮
        //   if (wheel == (parseInt(maxWheel) - 1) && (field == 1 || field == 2)) wheelName = '半决赛'
        //   if (wheel == (parseInt(maxWheel) - 1) && (field == 3 || field == 4)) wheelName = '5-8淘汰附加赛'

        // } else {
        //   if (wheel == maxWheel) wheelName = '决赛'
        //   if (wheel == (parseInt(maxWheel) - 1)) wheelName = '半决赛'
        // }
        // return wheelName
      },
      playerName: (battle, type) => {
        return schedule.Name(battle, type);
      },
      wheelName: battle => {
        return schedule.wheelName(battle);
      },
      // 判断是否签和人名一致
      battleName: (element, type) => {
        let obj = {};
        obj.site = type == 'a' ? schedule.shortenName(element.site_a) : schedule.shortenName(element.site_b);
        obj.name = type == 'a' ? schedule.shortenName(element.name_a) : schedule.shortenName(element.name_b);
        return obj.site == obj.name ? `${obj.name}` : `${obj.site}${obj.name}`;
      }
    },
    computed: {
      dragDisabled() {
        return function(item) {
          if (item) {
            return item.status == 2 ? true : false;
          } else {
            return false;
          }
        };
      },
      dragOptions() {
        return {
          animation: 0,
          group: 'Team',
          disabled: !this.editable,
          ghostClass: 'ghost',
          handleSchedule: [],
          matchTypes: ['', '循环+淘汰', '单循环', '单淘汰', '循环+循环']
        };
      },
      roundsClass() {
        return function(roundDisabled, teamsIndex, roundsIndex, stageIndex) {
          let disabledClass = roundDisabled ? 'tdDisable' : 'tdActive';
          let hoverClass = !roundDisabled && myVue.activeProjectIndex == teamsIndex && myVue.activeRoundsIndex ==
            roundsIndex && myVue.activeStage == stageIndex ?
            'projectBtnSelect' :
            'projectBtn';
          return `${disabledClass} ${hoverClass}`;
        };
      },
      ...mapState({
        platoonMatch: 'platoonMatch',
        platoonInfo: 'platoonInfo',
        platoonGrounds: 'platoonGrounds',
        platoonName: 'platoonName',
        roundsSelected: 'roundsSelected',
        teamsInfo: 'teamsInfo',
        firstRounds: 'firstRounds',
        secondRounds: 'secondRounds',
        platoonDate: 'platoonDate'
      })
    },
    mounted() {
      for (var i = 0; i < 3; i++) {
        this.moreField();
      }
    },
    created() {
      myVue = this;
      // this.$store.dispatch('getPlatoonInfo',this.$route.query.MatchId)
      //请求赛事信息
      //  })
    },
    watch: {
      list2(val) {},
      playGroundIndex(val) {},
      platoonInfo(val) {},
      platoonDate(val) {},
      platoonGrounds: {
        handler: function(val) {},
        deep: true
      },
      teamsInfo(val) {},
      list(val) {}
    },
    methods: {
      teamsRoundSelected(teams, teamsIndex) {
        this.$axios
          .post(
            '/platoon/return_platoon_count', {
              group_id: teams.project_id
            }, {
              headers: {
                token: window.sessionStorage.getItem('token')
              }
            }
          )
          .then(res => {
            if (res.data.code == 2000) {
              for (var i = 0; i < res.data.data.length; i++) {
                // 修改排序问题
                if (typeof res.data.data[i] == 'object' && res.data.data[i] != null) {
                  for (let x in res.data.data[i]) {
                    this.roundsSelected[i][teamsIndex][x].count = res.data.data[i][x];
                    if (this.roundsSelected[i][teamsIndex][x].countLength == res.data.data[i][x]) {
                      this.roundsSelected[i][teamsIndex][x].disable = true;
                    }
                  }
                }
              }
            }
          });
      },
      teamsChoose(teams, teamsIndex, roundsIndex, stage) {
        this.activeTeamMatchType = teams.roundInfo.formant;
        //arrLength取整
        let rounds = teams.rounds[stage].length;
        let roundsList = [];
        roundsList.push({});
        for (let i = 0; i < rounds; i++) {
          if (i == rounds - 1) {
            roundsList.push({
              roundsName: '决赛'
            });
          } else {
            if (i == rounds - 2) {
              roundsList.push({
                roundsName: '半决赛'
              });
            } else {
              let num = i + 1;
              roundsList.push({
                roundsName: '第' + num + '轮'
              });
            }
          }
        }
        this.activeProjectIndex = teamsIndex;
        this.activeRoundsIndex = roundsIndex;
        this.activeStage = stage;
        let playerList = JSON.parse(JSON.stringify(teams.rounds[stage][roundsIndex]));
        for (let i in playerList) {
          playerList[i].platoonGrounds_id = parseInt(i) + 1;
          playerList[i].stage = stage + 1;
          playerList[i].roundsIndex = roundsIndex + 1;
          playerList[i].teamsIndex = teamsIndex + 1;
          if (this.activeTeamMatchType == 3) {
            playerList[i].roundsName = roundsList[roundsIndex + 1].roundsName;
            playerList[i].matchType = '单淘汰';
          }
          playerList[i].match_time = '';
        }
        this.list = playerList;
      },
      updataList(evt) {
        if (this.list[evt.newIndex].place != null) {
          this.$axios
            .post(
              '/Platoon/change_status', {
                id: this.list[evt.newIndex].id,
                com_id: this.$route.query.MatchId
              }, {
                headers: {
                  token: window.sessionStorage.getItem('token')
                }
              }
            )
            .then(res => {
              if (res.data.code == 2001) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                let listIndex = schedule.battleReturnListIndex(this.list[evt.newIndex], this.teamsInfo);
                let stage = listIndex.stage;
                let team = listIndex.teamIndex;
                let round = listIndex.wheel;
                if (this.roundsSelected[stage][team][round].count > 0) this.roundsSelected[stage][team][round].count--;
                let backArr = this.list.splice(evt.newIndex, 1);
                let backItem = backArr[0];
                this.teamsInfo[team].rounds[stage][round].push(backItem);
                if (this.activeStage == stage && this.activeProjectIndex == team && this.activeRoundsIndex == round) {
                  this.list = this.teamsInfo[team].rounds[stage][round];
                }
                return
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                });
                let arr = JSON.parse(JSON.stringify(this.list))
                let arr1 = []
                arr1.push(arr[evt.newIndex])
                this.platoonGrounds[arr[evt.newIndex].row / 1 - 1][arr[evt.newIndex].col / 1 - 1].list = arr1;
                return
              }
            });
        } else {
          let listIndex = schedule.battleReturnListIndex(this.list[evt.newIndex], this.teamsInfo);
          let stage = listIndex.stage;
          let team = listIndex.teamIndex;
          let round = listIndex.wheel;
          if (this.roundsSelected[stage][team][round].count > 0) this.roundsSelected[stage][team][round].count--;
          let backArr = this.list.splice(evt.newIndex, 1);
          let backItem = backArr[0];
          this.teamsInfo[team].rounds[stage][round].push(backItem);
          if (this.activeStage == stage && this.activeProjectIndex == team && this.activeRoundsIndex == round) {
            this.list = this.teamsInfo[team].rounds[stage][round];
            this.list = this.arrDeleteRepeat(this.list);
          }
        }
      },
      RemoveList() {
        let stage = parseInt(this.activeStage);
        let team = parseInt(this.activeProjectIndex);
        let round = parseInt(this.activeRoundsIndex);
        if (this.roundsSelected[stage][team][round].count < this.roundsSelected[stage][team][round].countLength) {
          this.roundsSelected[stage][team][round].count++;
        }
        if (this.roundsSelected[stage][team][round].count == this.roundsSelected[stage][team][round].countLength) {
          this.roundsSelected[stage][team][round].disabled = true;
        }
        this.teamsInfo[team].rounds[stage][round] = this.arrDeleteRepeat(this.list);
      },
      updatePlayGround(evt) {
        for (let i in this.platoonGrounds) {
          for (let a in this.platoonGrounds[i]) {
            if (this.platoonGrounds[i][a].list.length > 1) {
              let spliceArray = this.platoonGrounds[i][a].list;
              this.platoonGrounds[i][a].list = this.platoonGrounds[i][a].list.slice(1, 2);
              let oldBattle = null;
              oldBattle = spliceArray.splice(0, 1)[0];
              let arr1 = []
              arr1.push(oldBattle)
              this.platoonGrounds[oldBattle.row / 1 - 1][oldBattle.col / 1 - 1].list = arr1;
              this.$message({
                message: "此操作不允许",
                type: 'error'
              });
              return
              if (oldBattle.place != null) {
                this.$axios
                  .post(
                    'Platoon/change_status', {
                      id: oldBattle.id,
                      com_id: this.$route.query.MatchId
                    }, {
                      headers: {
                        token: window.sessionStorage.getItem('token')
                      }
                    }
                  )
                  .then(res => {
                    if (res.data.code == 2001) {
                      let listIndex = schedule.battleReturnListIndex(oldBattle, this.teamsInfo);
                      let stage = listIndex.stage;
                      let team = listIndex.teamIndex;
                      let round = listIndex.wheel;
                      let checkList_sameItem = this.list.rounds[stage][round].find(element => {
                        return element.id == oldBattle.id;
                      });
                      if (!checkList_sameItem) this.list.rounds[stage][round].push(oldBattle);
                      if (this.roundsSelected[stage][team][round].count > 0) this.roundsSelected[stage][team][round].count--;
                      if (this.activeStage == stage && this.activeProjectIndex == team && this.activeRoundsIndex ==
                        round) {
                        this.list.push(oldBattle);
                        this.list = this.arrDeleteRepeat(this.list);
                      }
                      this.$message({
                        message: res.data.msg,
                        type: 'success'
                      });
                    } else {
                      this.$message({
                        message: res.data.msg,
                        type: 'error'
                      });
                    }
                  });
              } else {
                let listIndex = schedule.battleReturnListIndex(oldBattle, this.teamsInfo);
                let stage = listIndex.stage;
                let team = listIndex.teamIndex;
                let round = listIndex.wheel;
                let checkTeamsInfo_sameItem = this.teamsInfo[team].rounds[stage][round].find(element => {
                  return element.id == oldBattle.id;
                });
                if (!checkTeamsInfo_sameItem) this.teamsInfo[team].rounds[stage][round].push(oldBattle);
                if (this.roundsSelected[stage][team][round].count > 0) this.roundsSelected[stage][team][round].count--;
                if (this.activeStage == stage && this.activeProjectIndex == team && this.activeRoundsIndex == round) {
                  this.list.push(oldBattle);
                  this.list = this.arrDeleteRepeat(this.list);
                }
              }
            }
          }
        }
      },
      onMove({
        relatedContext,
        draggedContext
      }) {
        const draggedElement = draggedContext.element;
        return !draggedElement.score ? true : false;
      },
      pushScheduleHandle() {
        this.$confirm('注意每场比赛开始时间，确定保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          })
          .then(() => {
            let uploadObj = schedule.makePublishObj(this.platoonGrounds, this.platoonDate);
            this.$axios
              .post('/Platoon/go_to_ground', uploadObj, {
                headers: {
                  token: window.sessionStorage.getItem('token')
                }
              })
              .then(res => {
                this.resMessage(res);
              });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '您已取消'
            });
          });
      },
      Back() {
        this.$router.push({
          path: '/index/match/schedule',
          query: {
            MatchId: this.$route.query.MatchId
          }
        });
      },
      moreField() {
        schedule.moreField(this.platoonGrounds);
      },
      resMessage(res) {
        if (res.data.code == 2001) {
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          this.$router.push({
            path: '/index/match/checkSchedule',
            query: {
              MatchId: this.$route.query.MatchId
            }
          });
        }
        if (res.data.code == 4001) {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      },
      CurentTime(date) {
        var now = date;

        var year = now.getFullYear(); //年
        var month = now.getMonth() + 1; //月
        var day = now.getDate(); //日

        var hh = now.getHours(); //时
        var mm = now.getMinutes(); //分

        var clock = year + '-';

        if (month < 10) clock += '0';

        clock += month + '-';

        if (day < 10) clock += '0';

        clock += day;
        //
        // if(hh < 10)
        //   clock += "0";
        //
        // clock += hh + ":";
        // if (mm < 10) clock += '0';
        // clock += mm;
        return clock;
      },
      arrDeleteRepeat(arr) {
        let Arr = [];
        for (let i = 0; i < arr.length; i++) {
          if (Arr.indexOf(arr[i]) == -1) {
            Arr.push(arr[i]);
          }
        }
        return Arr;
      }
    }
  };
</script>

<style lang="less" scoped>
  .winner {
    color: #409eff;
  }

  .dragArea {
    width: 200px;
    height: 100px;
    background: #ffff;
  }

  .normal {
    background-color: grey;
  }

  .scoreAll {
    padding: 20px;

    .basicInfo {
      background: linear-gradient(90deg, rgba(66, 185, 131, 0.2), rgba(66, 185, 131, 0.4));
      border-radius: 2px;
      line-height: 30px;
      height: 30px;
      padding: 15px;
      overflow: hidden;
      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        margin-right: 20px;
      }

      .btnGroup {
        /*height: 60px;*/
        /*float: right;*/
        margin-right: 20px;
      }

      .date {
        width: 25%;
        padding: 10px 15px;
      }
    }

    .tableBox {
      margin-top: 10px;
      padding-bottom: 10px;

      .group {
        height: 40px;
        background-color: #f5f7fa;
        border-bottom: #727272;

        li {
          float: left;
          cursor: pointer;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #727272;
          padding: 0 10px;
        }

        li:first-child {
          border-right: 1px solid #eaeaea;
          border-bottom: 0;
          background-color: #fff;
          color: #409eff;
        }

        li:hover {
          color: #409eff;
        }

        .hasClick {
          background-color: #409eff;
          color: #fff;
        }
      }

      .date {
        padding: 10px 15px;
      }

      .tableMain {
        margin-top: 10px;

        .table1 {
          margin-top: 10px;
          text-align: center;
          border-collapse: collapse;
          border-left: 1px solid #eaeaea;
          border-top: 1px solid #eaeaea;

          thead {
            tr {
              height: 30px;
              width: 120px;
              background-color: rgba(66, 185, 131, 0.2);

              td {
                width: 120px;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
              }
            }
          }

          tbody {
            tr {
              height: 40px;
              width: 120px;

              .projectBtn:hover {
                transition: 0.5s;
                background: #afd6ff;
                color: #666666;
              }

              .projectBtnSelect {
                background: #409eff;
                color: #ffffff;
              }

              td {
                /*width: 8%;*/
                width: 120px;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
                transition: all 0.2s ease-out;
              }

              td:hover {
                /*width: 8%;*/
                transition: 0.5s;
                background: #afd6ff;
                /*background: linear-gradient(to right,#AFD6FF, #67B2FF);*/
                color: #666666;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
              }

              td:active {
                /*width: 8%;*/
                transition: 0.5s;
                background: #67b2ff;
                color: #fff;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
              }

              td:first-child {
                width: 10%;
              }

              td:nth-child(2) {
                width: 10%;
              }

              /*td:nth-child(2){*/
              /*width: 20%;*/
              /*}*/
            }
          }
        }

        .panel__body--list {
          width: 100%;
          // height: 50px;
          height: 100px;

          .panel__body--item {
            height: 40px;
            /* width: 120px; */
            border: 1px solid #eaeaea;
            box-shadow: 0px 3px 4px #eaeaea;
            float: left;
            line-height: 40px;
            text-align: center;
            color: #409eff;
            padding: 0 5px;
            margin-right: 10px;
          }

          .panel__body--item:hover {
            transition: 1.5s;

            box-shadow: 0px 6px 8px #eaeaea;
          }

          .sortable-drag {
            height: 40px;
            border: 1px solid #eaeaea;
            box-shadow: 8px 8px 5px 1px #eaeaea;
            float: left;
            line-height: 40px;
            text-align: center;
            background: #409eff;
            color: #fff;
            padding: 0 5px;
          }
        }

        .field {
          box-shadow: 7px 0px 13px 2px #9999;
          margin-top: 10px;
          width: 100%;
          height: 100px;
          text-align: center;
          border-collapse: collapse;
          border-left: 1px solid #eaeaea;
          border-top: 1px solid #eaeaea;
          margin-bottom: 50px;
          position: relative;
          table-layout: fixed;

          .morebox {
            position: absolute;
            height: 5px;
            width: 100%;
            background-color: #eaeaea;
            transition: all 0.5s;

            .more {
              position: absolute;
              bottom: -13px;
              height: 30px;
              background-color: #eaeaea;
              border-radius: 15px;
              width: 30px;
              line-height: 30px;
              color: #fff;
              left: 50%;
              margin-left: -15px;
              transition: all 0.5s;
            }
          }

          .morebox:hover {
            .more {
              background-color: #727272;
            }

            cursor: pointer;
            background-color: #727272;
          }

          thead {
            tr {
              height: 40px;
              background-color: rgba(66, 185, 131, 0.2);

              td {
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
                width: 164px;
              }

              td:first-child {
                width: 63px;
                overflow: hidden;
              }
            }
          }

          tbody {
            tr {
              width: 100%;
              height: 130px;

              td {
                width: 163px;
                vertical-align: top;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
                box-sizing: border-box;

                .panel__body--list--playground {
                  width: 100%;
                  height: 160px;
                  overflow: hidden;

                  .panel__body--item--playground {
                    height: 156px;
                    width: 100%;
                    border: 1px solid #eaeaea;
                    box-shadow: 0px 3px 4px #eaeaea;
                    float: left;
                    /*line-height: 40px;*/
                    text-align: center;
                    color: #409eff;

                    .battleBox {
                      display: flex;
                      flex-direction: column;
                      height: 100%;

                      .playerName {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 90px;
                        overflow: hidden;
                        white-space: nowrap;

                        .vsGround {
                          text-align: left;
                          margin: 0 15%;
                          height: 36px;
                          display: flex;
                          align-items: center;
                          border-bottom: 1px dashed rgba(102, 102, 102, 0.4);
                          border-top: 1px dashed rgba(102, 102, 102, 0.4);

                          .VS {
                            height: 100%;
                            border-right: 1px dashed #6666;
                            line-height: 36px;
                            padding-right: 6%;
                            padding-left: 4%;
                          }

                          .numBox {
                            flex: 1;
                            height: 100%;
                            border-right: 1px dashed #6666;
                            text-align: center;

                            /*max-width: 36px;*/
                            .numTop {
                              height: 50%;
                              border-bottom: 1px dashed #6666;
                            }
                          }
                        }
                      }

                      .playerInfo {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        height: 60px;
                        font-size: 12px;
                      }
                    }
                  }

                  .sortable-drag--playground {
                    /*height: 200px;*/
                    border: 1px solid #eaeaea;
                    box-shadow: 0px 3px 4px #eaeaea;
                    width: 100%;
                    height: 160px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: hidden;
                    /*float: left;*/
                    /*line-height: 200px;*/
                    text-align: center;
                    background: #409eff;
                    color: #fff;
                    padding: 0 5px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @header_background_color: rgba(66, 185, 131, 0.2);
  @header_text_color: #000;
  @alternate_row_background_color: #ddd;

  @table_width: 100%;
  @table_body_height: 750px;
  @column_one_width: 50px;
  @column_two_width: 164px;
  @column_three_width: 350px;

  .tableScorll {
    min-height: 700px;
    min-width: 80%;
  }

  .fixed_headers {
    table-layout: fixed;
    border-collapse: collapse;

    thead {
      background-color: @header_background_color;
      color: @header_text_color;

      tr {
        display: block;
        position: relative;

        th,
        td {
          padding: 5px 0;
          min-width: 163px;
          border-right: 1px solid #eaeaea;
        }

        td:nth-child(1),
        th:nth-child(1) {
          min-width: @column_one_width;
        }
      }
    }

    tbody {
      display: block;
      overflow: auto;
      width: 100%;
      height: @table_body_height;

      th,
      td {
        min-width: @column_two_width;

        .panel__body--list--playground {
          width: 163px;
          height: 149px;
          overflow: hidden;
          /* border: 1px solid #6666; */
          border-right: 1px solid #eaeaea;
          border-bottom: 1px solid #eaeaea;

          .panel__body--item--playground {
            height: 148px;
            width: 100%;
            box-shadow: 0px 2px 2px #eaeaea;
            float: left;
            /*line-height: 40px;*/
            text-align: center;
            color: #409eff;

            .battleBox {
              display: flex;
              flex-direction: column;
              height: 100%;

              .playerName {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 72px; //150 - 28 - 90 - 50
                overflow: hidden;
                white-space: nowrap;

                .vsGround {
                  text-align: left;
                  margin: 0 15%;
                  height: 36px;
                  display: flex;
                  align-items: center;
                  border-bottom: 1px dashed rgba(102, 102, 102, 0.4);
                  border-top: 1px dashed rgba(102, 102, 102, 0.4);

                  .VS {
                    height: 100%;
                    border-right: 1px dashed #6666;
                    line-height: 36px;
                    padding-right: 6%;
                    padding-left: 4%;
                  }

                  .numBox {
                    flex: 1;
                    height: 100%;
                    border-right: 1px dashed #6666;
                    text-align: center;

                    /*max-width: 36px;*/
                    .numTop {
                      height: 50%;
                      border-bottom: 1px dashed #6666;
                    }
                  }
                }
              }

              .playerInfo {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 50px;
                font-size: 12px;
              }
            }
          }

          .sortable-drag--playground {
            /*height: 200px;*/
            border: 1px solid #eaeaea;
            box-shadow: 0px 3px 4px #eaeaea;
            width: 100%;
            height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            /*float: left;*/
            /*line-height: 200px;*/
            text-align: center;
            background: #409eff;
            color: #fff;
            padding: 0 5px;
          }
        }
      }

      td:nth-child(1),
      th:nth-child(1) {
        min-width: @column_one_width;
        height: 49px;
        position: relative;
        border-right: 1px solid #eaeaea;

        .groundIndex {
          width: 49px;
          height: 149px;
          overflow: hidden;
          line-height: 149px;
        }
      }
    }

    .morebox {
      position: absolute;
      height: 5px;
      width: 100%;
      background-color: #eaeaea;
      transition: all 0.5s;

      .more {
        position: absolute;
        bottom: -13px;
        height: 30px;
        // background-color: #eaeaea;
        background-color: #727272;
        border-radius: 15px;
        width: 30px;
        line-height: 30px;
        color: #fff;
        left: 50%;
        margin-left: -15px;
        transition: all 0.5s;
      }
    }

    .morebox:hover {
      .more {
        background-color: #727272;
      }

      cursor: pointer;
      background-color: #727272;
    }
  }

  .old_ie_wrapper {
    height: @table_body_height;
    width: @table_width;
    overflow-x: hidden;
    overflow-y: auto;

    tbody {
      height: auto;
    }
  }
</style>
